<style>
.box-none{
	display:none;
}

#FileList,#FileSucceed{
	position:relative;
	margin:0px 5px 0px 5px;
	outline:0px solid #f00;
}

.imagesList{
	position:relative;
	width:100px;
	height:120px;
	float:left;
	padding-bottom:0px;
	border:1px solid #eee;
	margin:10px 10px;
	cursor:pointer;
	background:#fff;
}
.imagesList:hover{}

.imagesList:hover .title{
	color:#f00;
}
.imagesList .btn-file-del:before{
	display:block;
	width:100%;
	height:30px;
	position:absolute;
	top:0px;
	right:0px;
	z-index:-1;
	background:#000;
	opacity:0.6;
	content : " ";
	filter: alpha(opacity=60);
}
.imagesList .btn-file-del{
	display:none;
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	z-index:2;
	outline:0px solid #f00;
	text-align:right;
	color:#fff;
	font-size:18px;
	padding-right:4px;
}
.imagesList .btn-file-del .ace-icon:hover{
	color:#ff0000;
}

.imagesList .imagesBox{
	width:100%;
	height:96px;
	outline:0px solid #f00;
	position:relative;
}


.imagesList img{
	width:100%;
	height:99%;
}
.imagesList .title{
	height:20px;
	line-height:20px;
	text-align:center;
	font-size:12px;
	color:#333;
	outline:0px solid #f00;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.imagesList .red{
	background:#ff0000;
}
.imagesList .green{
	background:#00CC00;
}

.imagesList .ico-file-state-box{
	display:block;
	position: absolute;
	bottom: 0;
	right:0px;
	width: 0;
	height: 0;
	content: " ";
	z-index:auto;
	opacity:0.9;
	filter: alpha(opacity=90);
}

.imagesList .uploadFile-state1{
	
}
.imagesList .uploadFile-state2{
	display:block;
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	content: " ";
	z-index:auto;
	opacity:0.6;
	filter: alpha(opacity=60);
	background:#000;
}

.imagesList .uploadFile-state3{
	
}
.imagesList .uploadFile-state4{
	border-bottom: 40px solid  #f00 ;
	border-left: 40px solid transparent ;
	border-top: 40px solid transparent ;
}
.imagesList .uploadFile-state5{
	display:block;
	border-bottom: 40px solid  #1094FA ;
	border-left: 40px solid transparent ;
	border-top: 40px solid transparent ;
}

.imagesList .ico-file-state-bean{
	position: absolute;
	bottom:0;
	right:5px;
	z-index:auto;
	font-size:1em;
	outline:0px solid #f00;
}
.imagesList .ico-file-state-bean-s2{
	position: absolute;
	left:24px;
	top:23px;
	z-index:auto;
	font-size:3em;
	outline:0px solid #f00;	
}

#uploadProgress_box{
	position:relative;
	width:100%;
	height:20px;
	margin:5px 0px 5px 0px;
	background:#f2f2f2;
}
#uploadProgress_box .uploadFix{
	position:absolute;
	left:0;
	top:0;
	width:0%;
	height:100%;
	background:#1094FA;
	opacity:0.8;
	filter: alpha(opacity=80);
}
#uploadProgress_box .uploadFileState{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	color:#333;
	line-height:20px;
	padding-left:1em;
}
</style>

<div class="panel">
	<div class="panel-body">
		<div class="form-group">
			<!--tablele start-->
			<div class="tabbable">
				<ul id="myTab4" class="nav nav-tabs padding-12 tab-color-blue background-blue">
					<li class="active">
						<a href="#home4" data-toggle="tab">本地上传</a>
					</li>

					<li>
						<a href="#profile4" data-toggle="tab">插入图片</a>
					</li>
					
				</ul>

				<div class="tab-content">
					<!-- upload file start-->
					<div class="tab-pane in active" id="home4">
						<div class="form-group">
							<div class="row">
								<div class="col-xs-7">
									<label class="control-label" id="file_select"></label>
								</div>
								<div class="col-xs-5" style="text-align:right;">
									<div class="btn-group">
										<!--[if IE]>
											<!-->
											<button id="docOpen" type="button" class="btn btn-primary btn-sm" title="点击我可以打开文件">
												<i class="ace-icon 	fa fa-folder-open"></i>打开文件
											</button>
											<!--
										<![endif]-->
										
										<button id="start_upload" type="button" class="btn btn-primary btn-sm" title="打开文件进行上传">
											<span class="ace-icon fa fa-cloud-upload" aria-hidden="true"></span>开始上传
										</button>
										
									</div>
								
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="form-group">
								<div class="panel panel-default">
									<div id="FileList" class="row"  style="overflow:auto;overflow-x:hidden;height:180px;">
										<div class="imagesList" style="border:0;" id="container" title="点击我可以打开文件">								
											<div class="imagesBox">										
												<div class="editable-input editable-image">
													<label class="ace-file-input ace-file-multiple" id="openFilesTest">
														<span class="ace-file-container" data-title="Open Files" style="width:100px;height:118px;">
															<span class="ace-file-name" data-title="No File ...">
																<i class="ace-icon 	fa fa-folder-open" style="font-size:3em;line-height:30px;"></i>
															</span>
														</span>
													</label>
												</div>
											</div>
										</div>	
									</div>
									
								</div>
							</div>
						</div>
						<div class="form-group" style="margin-bottom:0px;">
							<div id="uploadProgress_box">
								<div class="uploadFix"></div>
								<div class="uploadFileState"></div>
							</div>
						</div>
						<div class="form-group">
							
							<div id="console" style="display:none"></div>
						</div>
					</div>
					<!-- upload file end-->
					
					<!-- insert images start-->
					<div class="tab-pane" id="profile4">
						<div style="margin:4px;padding:4px;outline:0px solid #f00;">
							<form role="form" class="form-horizontal" style="position:relative;outline:0px solid #f00;">

								<div class="form-group">
									<label class="col-xs-2 control-label" for="lastname">地址：</label>
									<div class="col-xs-8">
										<input type="text" name="image_url" class="form-control input-sm" value="../webFrame/assets/avatars/user.jpg">
									</div>
									<div class="col-xs-2">
										<div class="btn-group">
											<button title="插入网络文件" class="btn btn-primary btn-sm" type="button" id="FileInsert">
												<span aria-hidden="true" class="ace-icon fa fa-save"></span>插入图片
											</button>
										</div>
									</div>
								</div>
								
							</form>
							
						</div>
						
						<!--image view start-->
						<div class="panel panel-default">
							<div id="imageView"  style="overflow:auto;overflow-x:hidden;height:200px;"></div>
						</div>
						<!--image view end-->
					</div>
					<!-- insert images end-->
				</div>
			</div>
			<!--tablele end-->
		</div>
	</div>
</div>
